<template>
  <article>
    <div class="facedb">
      <h3>人脸底库</h3>
      <ul>
        <li v-for="(item, idx) in img_list">
          <img :src="item.img" alt="">
          <div class="user">{{ item.user }}</div>
          <!-- <button @click="deleteRow(item)" :data-idx="idx" class="btn btn-danger">
                  <i class="glyphicon glyphicon-remove"></i>
            </button> -->
        </li>
      </ul>
    </div>

  </article>

</template>

<script>
import axios from 'axios'
import { onMounted, reactive, toRefs } from 'vue'

export default {
  setup() {
    let base_url = "http://10.82.14.162:8000/face/"
    const img_blank = { url: '', user: '', img: '', feature: '', }
    const state = reactive({
      img_list: [],
      img: Object.assign({}, img_blank),
    })

    const getImgList = () => {
      axios.get(base_url).then(res => {
        state.img_list = res.data;
        state.img = Object.assign({}, img_blank)
      }).catch(err => {
        console.log(err);
      })
    }


    const deleteRow = (item) => {
      axios.delete(item.url).then(() => {
        getImgList();
      }).catch(err => {
        console.log(err);
      })
    }

    onMounted(() => {
      getImgList();
    })
    return {
      ...toRefs(state),
      deleteRow
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
article {
  div.facedb {
    width: 100%;
    height: 100%;
    overflow: auto;

    ul {
      list-style-type: none;

      li {
        width: 120px;
        height: 120px;
        float: left;
        // border: solid 1px red;

        img {
          width: 100px;
          height: 100px;
          aspect-ratio: true;
        }

      }
    }
  }
}
</style>
